import React, { Component } from 'react';
import Base from './base';
import { connect } from 'react-redux';
import DigitButton from './calculator/digitButton';
import OperationButton from './calculator/operationButton';
import ACTIONS from '../../redux/action';

class Calculator extends Component {
    // 初始化状态，设置数字格式化为美式英语
    state = {
        formater: Intl.NumberFormat('en-us'),
    };

    // 格式化数字，将数字转换为美式英语格式
    format = number => {
        const [interger, decimal] = number.split('.');
        if (decimal === undefined)
            return this.state.formater.format(interger);
        return `${this.state.formater.format(interger)}.${decimal}`;
    }
    render() { 
        // 渲染函数
        return (
            <Base>
                {/* 基础组件 */}
                <div className="calculator">
                    {/* 计算器组件 */}
                    <div className="output">
                        {/* 输出组件 */}
                        <div className='last-output'>
                            {/* 上一次的输出 */}
                            {this.format(this.props.lastOperand)}{this.props.operation}
                        </div>
                        <div className='current-output'>
                            {/* 当前输出 */}
                            {this.format(this.props.currentOperand)}
                        </div>
                    </div>
                    <button onClick={this.props.clear} className='span-2'>AC</button>
                    {/* 清除按钮 */}
                    <button onClick={this.props.delete_digit}>Del</button>
                    {/* 删除按钮 */}
                    <OperationButton operation={"/"} />
                    {/* 除法按钮 */}
                    <DigitButton digit={"7"}/>
                    {/* 数字按钮 */}
                    <DigitButton digit={"8"}/>
                    <DigitButton digit={"9"}/>
                    <OperationButton operation={"*"}/>
                    <DigitButton digit={"4"}/>
                    <DigitButton digit={"5"}/>
                    <DigitButton digit={"6"}/>
                    <OperationButton operation={"-"}/>
                    <DigitButton digit={"1"}/>
                    <DigitButton digit={"2"}/>
                    <DigitButton digit={"3"}/>
                    <OperationButton operation={"+"}/>
                    <DigitButton digit={"0"}/>
                    <DigitButton digit={"."} />
                    {/* 小数点按钮 */}
                    <button onClick={this.props.evaluate } className="span-2">=</button>
                    {/* 等于按钮 */}
                </div>
            </Base>
            
        );
    }
}
// 将state中的currentOperand、lastOperand、operation映射到props中
const mapStateToProps = (state,props) => {
    return {
        // 当前操作数
        currentOperand: state.currentOperand,
        // 上一个操作数
        lastOperand: state.lastOperand,
        // 操作符
        operation: state.operation,
    }
}

const mapDispatchToProps= {
    delete_digit: () => {
        return {
            type: ACTIONS.DELETE_DIGIT,
        }
    },
    clear: () => {
        return {
            type: ACTIONS.CLEAR,
        }
    },
    evaluate: () => {
        return {
            type: ACTIONS.EVALUATE,
        }
    }
}

 
export default connect(mapStateToProps,mapDispatchToProps)(Calculator);